<template>
  <div class="table">
    <el-table :data="singerlist" stripe style="width: 100%" :show-header="false" @row-click="toSingerDetail">
      <el-table-column type="index" width="50" align="center">
        <template slot-scope="scope">
          <span class="ranknum">{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <div class="img">
            <img :src="scope.row.img1v1Url" />
            <span class="name">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSingerRank } from '../../../network/songsranking.js'
export default {
  props: ['type'],
  data () {
    return {
      singerlist: [],
      nums: 1
    }
  },
  methods: {
    toSingerDetail (row) {
      // console.log(row)
      this.$router.push('/singer_detail/' + row.id)
    },
    getSingerRank (type) {
      getSingerRank(type).then(res => {
        // console.log(res.data)
        this.singerlist = res.data.list.artists
        this.singerlist.forEach(item => {
          item.num = this.nums++
        })
        this.updateTime = res.data.list.updateTime
      })
    }
  },
  created () {
    this.getSingerRank(this.type)
  }
}
</script>

<style lang="less" scoped>
  .img {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
    }
    .name {
      margin-left: 10px;
      font-size: 17px;
    }
  }
</style>
